import React, { Component } from 'react'
import { Chart } from '@/components/Chart';
import { Radio } from 'antd'
import styles from './style.css';
import { connect } from 'dva';
import { UmiComponentProps } from '@/common/type';
import { getDaysInOneMonth } from "@/utils/util";
import styled from 'styled-components'
const dateList = ['5日', '10日', '15日', '20日', '25日', '30日', '31日'];

interface P {
  data?: {
    list: Array<any>;
  }
}
const MySpan = styled.span`
	display: inline-block;
	height: 13;
	line-height: 8px;
	margin-left: ${props => props.left || 0};
	color:rgba(0,0,0,0.85);
	font-weight: 400;
	font-size: 15;
`;

const MyCircleBox = styled.div`
	width: 10px;
	height: 10px;
	background: ${(props) => props.color};
	border-radius: 50%;
`;
type Props = P & UmiComponentProps;

@connect(({ analyse_alarm }) => ({
  data: analyse_alarm.alarmTrend || {}
}))
class Fire extends Component<Props> {
  readonly state = {
    mode: -1,
  }
  
  handleChange = (e) => {
    const mode = e.target.value;
    this.setState(() => ({ mode }), () => {
      this.queryData(mode)
    });
  }
  
  formatDay = (data) => {
    const [time, total] = [[], []];

    for (let i = 0, len = Math.floor(data.length / 2); i < len; i += 2) {
      time.push(`${i+1}日`);
      total.push(data[i].total + data[i+1].total);
    }

    return [time, total];
  }

  formatMonth = (data) => {
    let total = [0, 0, 0, 0, 0, 0, 0];
    const max = `${getDaysInOneMonth(new Date().getFullYear(), new Date().getMonth() + 1)}日`;
    if (dateList[dateList.length-1] !== max) {
      dateList[dateList.length-1] = max
    }

    for (let i = 0, len = data.length; i < len; i++) {
      total[Math.floor(i / 5)] += +data[i].total;
    }

    return [dateList, total];
  }

  getData = (data) => {
    const [time, total] = [[], []];

    Array.isArray(data) &&  data.forEach(v => {
      time.push(v.time);
      total.push(v.total);
    });

    return [time, total];
  }
  
  queryData = mode => {
    const { dispatch } = this.props;

    dispatch({ type: 'analyse_alarm/queryAlarmTrend', payload: { type: mode } }).then(() => {
      const { list } = this.props.data;

      const [time, total] = DATA[mode].func
        ? this[DATA[mode].func](list) 
        : this.getData(list)
      this.renderChart(Array.isArray(time) ? time : [], total)
    })
  }

  renderChart = (label, data) => {
    Chart({
      ref: this.refs.line,
      label,
      yAxis: {
        name: '数量',
        splitLine: {
          show: false
        }
      },
      xAxis: {
        name: '时间',
        splitLine: {
          show: false
        },
      },
      data: [{
        name: '火警',
        type: "line",
        data,
        color: '#0880DF',
        label: {
          show: true,
          position: 'top',
          color: '#0880DF'
        },
      }]
    })
  }

  componentDidMount() {
    this.queryData(-1)
  }

  render() {
    return (
      <section style={{ height: '100%', width: '100%', padding: '3%', position: 'relative' }}>
         <div style={{ position: 'absolute', right: 133, top: 70, display: 'flex' }}>
          <MyCircleBox color='#0880DF'></MyCircleBox>
          <MySpan left='10px'>时段内的报警数量</MySpan>
        </div>
        <div ref='line' style={{ width: '100%', height: '100%' }}></div>
        <div style={{ position: 'absolute', top: 19, right: 30 }}>
            <Radio.Group className={styles.radioGroup} buttonStyle="solid" onChange={this.handleChange} value={+this.state.mode}>
              {
                ([-1, 1, 2, 3]).map((v, ind) => <Radio.Button value={v} key={ind}>{ DATA[v].name }</Radio.Button>)
              }
            </Radio.Group>
          </div>
      </section>
    )
  }
}

export default Fire;

const DATA = {
  [-1]: { name: '今日' },
  1: { name: '本周' },
  2: { name: '本月', func: 'formatMonth' },
  3: { name: '本年' },
};